<script setup lang="ts"></script>

<template>
  <div>Size</div>
  <fl-button>Button</fl-button>
  <fl-button size="large">Large</fl-button>
  <fl-button size="small">Small</fl-button>
  <div>Type</div>
  <fl-button type="primary"> Primary</fl-button>
  <fl-button type="success"> Success</fl-button>
  <fl-button type="warning"> Warning</fl-button>
  <fl-button type="danger"> Danger</fl-button>
  <fl-button type="error"> Error</fl-button>
  <fl-button type="info"> Info</fl-button>
  <div>Plain</div>
  <fl-button plain>Plain</fl-button>
  <fl-button plain type="primary">Plain Primary</fl-button>
  <fl-button plain type="success">Plain Success</fl-button>
  <fl-button plain type="warning">Plain Warning</fl-button>
  <fl-button plain type="danger">Plain Danger</fl-button>
  <fl-button plain type="error">Plain Error</fl-button>
  <fl-button plain type="info">Plain Info</fl-button>
  <div>Text</div>
  <fl-button text>Text</fl-button>
  <fl-button text type="primary">Text Primary</fl-button>
  <fl-button text type="success">Text Success</fl-button>
  <fl-button text type="warning">Text Warning</fl-button>
  <fl-button text type="danger">Text Danger</fl-button>
  <fl-button text type="error">Text Error</fl-button>
  <fl-button text type="info">Text Info</fl-button>
  <div>Link</div>
  <fl-button link>Text</fl-button>
  <fl-button link type="primary">Link Primary</fl-button>
  <fl-button link type="success">Link Success</fl-button>
  <fl-button link type="warning">Link Warning</fl-button>
  <fl-button link type="danger">Link Danger</fl-button>
  <fl-button link type="error">Link Error</fl-button>
  <fl-button link type="info">Link Info</fl-button>
  <div>Disabled</div>
  <fl-button disabled>Disabled Button</fl-button>
  <fl-button disabled type="primary">Disabled Primary</fl-button>
  <fl-button disabled type="success">Disabled Success</fl-button>
  <fl-button disabled type="warning">Disabled Warning</fl-button>
  <fl-button disabled type="danger">Disabled Danger</fl-button>
  <fl-button disabled type="error">Disabled Error</fl-button>
  <fl-button disabled type="info">Disabled Info</fl-button>
  <div>Disabled Plain</div>
  <fl-button plain disabled>Disabled Button</fl-button>
  <fl-button plain disabled type="primary">Disabled Primary</fl-button>
  <fl-button plain disabled type="success">Disabled Success</fl-button>
  <fl-button plain disabled type="warning">Disabled Warning</fl-button>
  <fl-button plain disabled type="danger">Disabled Danger</fl-button>
  <fl-button plain disabled type="error">Disabled Error</fl-button>
  <fl-button plain disabled type="info">Disabled Info</fl-button>
  <div>Disabled Text</div>
  <fl-button text disabled>Disabled Button</fl-button>
  <fl-button text disabled type="primary">Disabled Primary</fl-button>
  <fl-button text disabled type="success">Disabled Success</fl-button>
  <fl-button text disabled type="warning">Disabled Warning</fl-button>
  <fl-button text disabled type="danger">Disabled Danger</fl-button>
  <fl-button text disabled type="error">Disabled Error</fl-button>
  <fl-button text disabled type="info">Disabled Info</fl-button>
  <div>Disabled Link</div>
  <fl-button link disabled>Disabled Button</fl-button>
  <fl-button link disabled type="primary">Disabled Primary</fl-button>
  <fl-button link disabled type="success">Disabled Success</fl-button>
  <fl-button link disabled type="warning">Disabled Warning</fl-button>
  <fl-button link disabled type="danger">Disabled Danger</fl-button>
  <fl-button link disabled type="error">Disabled Error</fl-button>
  <fl-button link disabled type="info">Disabled Info</fl-button>
  <div>Loading</div>
  <fl-button loading>Loading</fl-button>

  <div>Circle</div>
  <fl-button circle>Circle</fl-button>
  <fl-button size="large" circle>L</fl-button>
  <fl-button size="small" circle>S</fl-button>
  <fl-button circle type="primary">P C</fl-button>
  <fl-button circle type="warning">W C</fl-button>
  <fl-button circle type="error">E C</fl-button>
  <fl-button circle type="info">I C</fl-button>
  <div>Round</div>
  <fl-button round>D Round</fl-button>
  <fl-button size="large" round>L Round</fl-button>
  <fl-button size="small" round>S Round</fl-button>
  <fl-button round type="primary">Primary Round</fl-button>
  <fl-button round type="warning">Warning Round</fl-button>
  <fl-button round type="error">Error Round</fl-button>
  <fl-button round type="info">Info Round</fl-button>
</template>

<style>
#play {
  /* background-color: rgb(9, 9, 9); */
}
</style>
